<template>
    <div>
        <div class="search-container">
            <el-form label-width="auto">
                <div class="form-container">
                    <el-form-item label="商品名">
                        <el-input v-model="queryParam.productName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="button-list">
                            <el-button @click="handleSearch">搜索</el-button>
                            <el-badge :value="selectItems.length">
                                <el-button :icon="ShoppingCart" circle />
                            </el-badge>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <el-scrollbar max-height="400px">
            <ul v-infinite-scroll="getData" class="list-container">
                <li v-for="item in productArr" :key="item.id">
                    <el-card style="padding: 0px;">
                        <el-image class="image" :src="'http://localhost:5099/wwwroot/images/' + item.productPict"
                            fit="cover"></el-image>
                        <template #footer>
                            <div class="productInfo">
                                <div>
                                    <span>{{ item.productName }}</span>
                                    <span>{{ item.price }}￥</span>
                                </div>


                                <el-input-number v-model="item.count" :min="0" size="small" controls-position="right"
                                    @change="handleChange(item)" />
                            </div>
                        </template>
                    </el-card>
                </li>
            </ul>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
    import { computed, reactive, ref } from 'vue';
    import productinfoapi from '../api/productinfoapi';
    import { ShoppingCart } from "@element-plus/icons-vue"

    const selectItems = defineModel('modelValue', { type: Array, default: reactive<Array<ProductInfo>>([]) })

    interface ProductInfo {
        id: number
        productPict: string
        productName: string
        price: number
        count: number
    }

    // 查询参数
    const queryParam = reactive({
        productName: "",
        pageIndex: 0,
        pageSize: 6
    });

    const productArr = ref<Array<ProductInfo>>([]);


    // 获取数据
    const getData = () => {
        queryParam.pageIndex += 1;
        productinfoapi.Query(queryParam).then(res => {
            console.log(res);

            let array: ProductInfo[] = res.data.map((p: any) => {
                return {
                    id: p.Id,
                    productId:p.Id,
                    productPict: p.ProductPict,
                    productName: p.ProductName,
                    price: p.ProductPrice,
                    count: 0
                }
            });

            // 重新绑定数量
            array.forEach(item => {
                let i = selectItems.value.findIndex(p=>p.id==item.id)
                if(i>-1){
                    item.count = selectItems.value[i].count;
                }
            });

            productArr.value.push(...array);
        })
    }

    // 搜索事件
    const handleSearch = () => {
        queryParam.pageIndex = 0;
        productArr.value = [];
        getData();
    }

    const handleChange = (item: ProductInfo) => {
        if (item.count == 0) {
            let i = selectItems.value.findIndex((p: any) => p.id == item.id);
            selectItems.value.splice(i, 1);
        } else {
            if (!selectItems.value.includes(item)) {
                selectItems.value.push(item);
            }
        }

    }

    getData();
</script>

<style scoped>
    .form-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    .list-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 20px;
    }

    .image {
        width: 100%;
        height: 100px;
    }

    .productInfo {
        display: flex;
        flex-direction: column;
        gap: 8px 0;
    }

    .productInfo>div>span:first-child {
        font-size: 14px;
    }

    .productInfo>div>span:nth-child(2) {
        color: var(--el-color-error);
        margin-left: 10px;
        font-size: 12px;
    }
    
    .button-list{
        display: flex;
        gap:0 8px;
        
    }
</style>